<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style media="screen">
        body {background: #000;}
        #svg {background: #fff;}
    </style>
</head>
<body>
    <svg id="svg" width="800" height="800">
        <!-- <path d="M 400,100 A 100 100 0 0 0 400 500" style="fill:none;stroke:#000;"></path> -->
        <!-- <path d="M 400,100 A 100 100 0 0 1 400 500 A 50 50 0 0 1 400 300 A 50 50 0 0 0 400 100" style="stroke:#000;"></path> -->
        <path id="p1" d="M 400,100 A 200 200 0 0 0 400 500" style="fill:none;stroke:#000;"></path>
        <path id="p2" style="stroke:#000;"></path>
    </svg>
    <script>
        let path2 = document.querySelector('#p2');
        let r = 200, rx = 400, ry = 300;

        let arr = [];
        arr.push(`M 400 100 A ${r} ${r} 0 0 1 400 500`);
        arr.push(`Q ${rx + Math.sqrt(Math.pow(r, 2) - Math.pow(r/2, 2))} ${ry + r / 2} ${rx} ${ry}`);
        arr.push(`Q ${rx - Math.sqrt(Math.pow(r, 2) - Math.pow(r/2, 2))} ${ry - r / 2} ${rx} ${ry - r}`);
        let d = arr.join(' ');
        console.log(d);
        path2.setAttribute('d', d);
    </script>
</body>
</html>
